<!-- FollowList.vue -->
<template>
  <div class="follow-container">
    <el-tabs v-model="activeTab" class="follow-tabs">
      <el-tab-pane label="我的关注" name="following">
        <div class="user-list">
          <el-card v-for="user in followingUsers" :key="user.id" class="user-card">
            <div class="user-info">
              <div class="user-main">
                <span class="username">{{ user.username }}</span>
                <span class="user-id">ID: {{ user.id }}</span>
              </div>
              <div class="user-actions">
                <el-button
                  type="primary"
                  size="small"
                  @click="handleFollow(user.id)"
                  :class="{ 'is-following': isFollowing(user.id) }"
                >
                  {{ isFollowing(user.id) ? '已关注' : '关注' }}
                </el-button>
                <el-button
                  type="info"
                  size="small"
                  @click="openFavoritesDialog(user)"
                >
                  查看收藏夹
                </el-button>
              </div>
            </div>
          </el-card>
          <el-empty v-if="followingUsers.length === 0" description="暂无关注" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="我的粉丝" name="followers">
        <div class="user-list">
          <el-card v-for="user in followerUsers" :key="user.id" class="user-card">
            <div class="user-info">
              <div class="user-main">
                <span class="username">{{ user.username }}</span>
                <span class="user-id">ID: {{ user.id }}</span>
              </div>
              <div class="user-actions">
                <el-button
                  type="primary"
                  size="small"
                  @click="handleFollow(user.id)"
                  :class="{ 'is-following': isFollowing(user.id) }"
                >
                  {{ isFollowing(user.id) ? '已关注' : '关注' }}
                </el-button>
                <el-button
                  type="info"
                  size="small"
                  @click="openFavoritesDialog(user)"
                >
                  查看收藏夹
                </el-button>
              </div>
            </div>
          </el-card>
          <el-empty v-if="followerUsers.length === 0" description="暂无粉丝" />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!--收藏夹对话框 -->
    <el-dialog
      v-model="showFavoritesDialog"
      :title="`${userInfo.username}的收藏夹`"
      width="90%"
      top="5vh"
    >
      <UserProfileActions
        v-if="currentViewUser"
        :userId="currentViewUser.id"
        :currentUser="userInfo"
      />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import UserProfileActions from './UserProfileActions.vue';

export default {
  name: 'FollowList',
  components: {
    UserProfileActions
  },
  props: {
    userInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'following',
      followData: {
        followers: [],
        following: []
      },
      followerUsers: [],
      followingUsers: [],
      loading: false,
      // 新增：控制收藏夹对话框的变量
      showFavoritesDialog: false,
      currentViewUser: null
    };
  },
  created() {
    this.fetchFollowData();
  },
  methods: {
    //打开收藏夹对话框的方法
    openFavoritesDialog(user) {
      this.currentViewUser = user;
      this.showFavoritesDialog = true;
    },

    async fetchFollowData() {
      try {
        this.loading = true;
        const response = await axios.get('/backend/api/account/follow_data/');
        this.followData = response.data;
        await this.fetchUserDetails();
      } catch (error) {
        this.$message.error('获取关注数据失败');
        console.error('获取关注数据错误:', error);
      } finally {
        this.loading = false;
      }
    },
    // 其他方法保持不变
    async fetchUserDetails() {
      try {
        const followingPromises = this.followData.following.map(id =>
          axios.get(`/backend/api/account/profile/${id}/`)
        );
        const followingResponses = await Promise.all(followingPromises);
        this.followingUsers = followingResponses.map(response => response.data);

        const followerPromises = this.followData.followers.map(id =>
          axios.get(`/backend/api/account/profile/${id}/`)
        );
        const followerResponses = await Promise.all(followerPromises);
        this.followerUsers = followerResponses.map(response => response.data);
      } catch (error) {
        this.$message.error('获取用户详细信息失败');
        console.error('获取用户详细信息错误:', error);
      }
    },
    isFollowing(userId) {
      return this.followData.following.includes(userId);
    },
    async handleFollow(userId) {
      try {
        if (this.isFollowing(userId)) {
          await axios.post('/backend/api/account/unfollow/', { user_id: userId });
          this.followData.following = this.followData.following.filter(id => id !== userId);
          this.$message.success('取消关注成功');
        } else {
          await axios.post('/backend/api/account/follow/', { user_id: userId });
          this.followData.following.push(userId);
          this.$message.success('关注成功');
        }
      } catch (error) {
        this.$message.error(this.isFollowing(userId) ? '取消关注失败' : '关注失败');
        console.error('关注操作错误:', error);
      }
    }
  }
};
</script>

<style scoped>
.follow-container {
  padding: 20px;
}

.follow-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.user-card {
  margin-bottom: 15px;
}

.user-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.user-id {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}
</style>